<template>
	<view>
		<view class="kong">

		</view>

		<view class="order_hedar">
			<view class="order_back" @click="fanhui">
				<view>
					<image src="../../static/TestImg/left.png" id="backone">
				</view>
			</view>
			<view class="order_search">
				<view href="./waibusousuo.html"><input type="text" placeholder="搜索我的订单" class="kuang" @click="sousuo">
				</view>
			</view>
			<view class="order_mean" @click="show = true">
				<image src="../../static/TestImg/sangedian.png">
			</view>
			<image src="../../static/TestImg/sousuo.png" class="sousuo">
		</view>
		<view class="navigation">
			<view class="navigation_ul">
				<view class="navigation_li" id="navigation_li1" @click="allg"><text>全部</text></view>
				<view class="navigation_li" @click="fukuand"><text>待付款</text></view>
				<view class="navigation_li" @click="daifahuod"><text>待发货</text></view>
				<view class="navigation_li" @click="daishouhuod"><text>待收货/使用</text></view>
				<view class="navigation_li" @click="pinjiad"><text>评价</text></view>


			</view>
		</view>
		<view class="Information_hot">
			<text class="Information_hot01">春焕颜</text>
			<text class="Information_hot02">广告，跨店满减-----</text>
			<text class="Information_hot03">去逛逛 ><i class="iconfont icon-jiankuohao"></i></text>
		</view>

		<view class="kongkong" v-if="kongkongd">
			<view class="neirong">
				<image src="../../static/TestImg/dingdan.png" mode=""></image>
				<text>您暂时没有商品</text>
			</view>
		</view>
		<view class="Information" v-if="all">


			<view class="Information_show" v-for="(item,i) in statuss" :key="i">

				<!-- 后端渲染，店铺头像 -->
				<view class="yibufen">
					<image :src="item.image[0]" alt="" class="tupian" />
					<text class="dianname"> &nbsp;{{item.name}} ><i class="iconfont icon-jiankuohao"></i></text>
					<text class="zhuangtai">{{item.status}}</text>
				</view>

				<!-- 商品图片 -->
				<view class="erbufen">
					<image :src="item.image[0]" alt="" class="shangp" />
					<text class="shangp_text">{{item.productName}}</text>
					<text class="danjia">单价：{{item.price}}</text>
					<text class="guige">{{item.attributes.specs.color}}/{{item.attributes.specs.storage}}</text>
					<text class="shuliang">X{{item.quantity}}</text>
					<!-- 	<text class="guanjianci">关键词xxxxxxxxx</text> -->
				</view>
				<view class="sanbufen">
					<text class="zongshu">共 {{item.quantity}} 件</text>
					<text class="zongjia">应付款：{{item.attributes.price}}</text>
				</view>
				<view class="ppp">
					<Home class="ddddd" :setName="item.status" :img="item.image[0]" :bt="item.productName"></Home>
				</view>


			</view>

		</view>

		<view class="daifukuan" v-if="fukuan">


			<view class="Information_show" v-for="(item,i) in statusdaifukuan" :key="i">

				<!-- 后端渲染，店铺头像 -->
				<view class="yibufen">
					<image src="../../static/TestImg/boy.jpg" alt="" class="tupian" />
					<text class="dianname"> &nbsp;{{item.name}} ><i class="iconfont icon-jiankuohao"></i></text>
					<text class="zhuangtai">{{item.status}}</text>
				</view>

				<!-- 商品图片 -->
				<view class="erbufen">
					<image :src="item.image[0]" alt="" class="shangp" />
					<text class="shangp_text">{{item.productName}}</text>
					<text class="danjia">单价：{{item.price}}</text>
					<text class="guige">{{item.attributes.specs.color}}/{{item.attributes.specs.storage}}</text>
					<text class="shuliang">X{{item.quantity}}</text>
					<!-- <text class="guanjianci">关键词xxxxxxxxx</text> -->
				</view>
				<view class="sanbufen">
					<text class="zongshu">共 {{item.quantity}} 件</text>
					<text class="zongjia">应付款：{{item.attributes.price}}</text>
				</view>
				<view class="ppp">
					<Home class="ddddd" :setName="item.status"></Home>
				</view>


			</view>

		</view>

		<view class="daifahuo" v-if="daifahuo">


			<view class="Information_show" v-for="(item,i) in statusdaifahuo" :key="i">

				<!-- 后端渲染，店铺头像 -->
				<view class="yibufen">
					<image :src="item.image[0]" alt="" class="tupian" />
					<text class="dianname"> &nbsp;{{item.name}} ><i class="iconfont icon-jiankuohao"></i></text>
					<text class="zhuangtai">{{item.status}}</text>
				</view>

				<!-- 商品图片 -->
				<view class="erbufen">
					<image :src="item.image[0]" alt="" class="shangp" />
					<text class="shangp_text">{{item.productName}}</text>
					<text class="danjia">单价：{{item.price}}</text>
					<text class="guige">{{item.attributes.specs.color}}/{{item.attributes.specs.storage}}</text>
					<text class="shuliang">X{{item.quantity}}</text>
					<!-- <text class="guanjianci">关键词xxxxxxxxx</text> -->
				</view>
				<view class="sanbufen">
					<text class="zongshu">共 {{item.quantity}} 件</text>
					<text class="zongjia">应付款：{{item.attributes.price}}</text>
				</view>
				<view class="ppp">
					<Home class="ddddd" :setName="item.status"></Home>
				</view>


			</view>

		</view>
		<view class="yifahuo" v-if="daishouhuo">


			<view class="Information_show" v-for="(item,i) in statusyifahuo" :key="i">


				<view class="yibufen">
					<image src="../../static/TestImg/boy.jpg" alt="" class="tupian" />
					<text class="dianname"> &nbsp;{{item.name}} ><i class="iconfont icon-jiankuohao"></i></text>
					<text class="zhuangtai">{{item.status}}</text>
				</view>


				<view class="erbufen">
					<image :src="item.image[0]" alt="" class="shangp" />
					<text class="shangp_text">{{item.productName}}</text>
					<text class="danjia">单价：{{item.price}}</text>
					<text class="guige">{{item.attributes.specs.color}}/{{item.attributes.specs.storage}}</text>
					<text class="shuliang">X{{item.quantity}}</text>

				</view>
				<view class="sanbufen">
					<text class="zongshu">共 {{item.quantity}} 件</text>
					<text class="zongjia">应付款：{{item.attributes.price}}</text>
				</view>
				<view class="ppp">
					<Home class="ddddd" :setName="item.status"></Home>
				</view>


			</view>

		</view>
		<view class="pingjia" v-if="pinjia">


			<view class="Information_show" v-for="(item,i) in statusdaipjia" :key="i">

				<!-- 后端渲染，店铺头像 -->
				<view class="yibufen">
					<image src="../../static/TestImg/boy.jpg" alt="" class="tupian" />
					<text class="dianname"> &nbsp;{{item.name}} ><i class="iconfont icon-jiankuohao"></i></text>
					<text class="zhuangtai">{{item.status}}</text>
				</view>

				<!-- 商品图片 -->
				<view class="erbufen">
					<image :src="item.image[0]" alt="" class="shangp" />
					<text class="shangp_text">{{item.productName}}</text>
					<text class="danjia">单价：{{item.price}}</text>
					<text class="guige">{{item.attributes.specs.color}}/{{item.attributes.specs.storage}}</text>
					<text class="shuliang">X{{item.quantity}}</text>
					<!-- 	<text class="guanjianci">关键词xxxxxxxxx</text> -->
				</view>
				<view class="sanbufen">
					<text class="zongshu">共 {{item.quantity}} 件</text>
					<text class="zongjia">应付款：{{item.attributes.price}}</text>
				</view>
				<view class="ppp">
					<Home class="ddddd" :setName="item.status" :img="item.image[0]" :bt="item.productName"></Home>
				</view>


			</view>

		</view>

		<view class="tuijian_shangp" >
			<view class="biaoti">
				<text class="biaoti_yidong"><text class="henggang">—— </text>推荐商品<text class="henggang">
						——</text></text>
			</view>
			<view class="tuijian" v-for="(item,i) in tuijianw" :key="i" @click="tuijian(i)" >
				<image :src="item.image[0]" alt="" class="dianpu">
					<text class="shopping_name">{{item.description}}</text>
					<text class="shopping_money">
						<text size="6rpx">￥{{item.attributes.price}}</text>
					</text>
					<text class="shopping_yuanjia"><del>￥1000</del></text>
					<text class="shopping_num">30w+已买</text>
					<view class="xinxi_x">
						<text class="xinxi">新客|退货包运费</text>
					</view>
			</view>


		</view>
		<u-popup :show="show" :round="30" mode="bottom" @close="close" @open="open">
			<view class="tanchukuang">
				<view class="biaotidi">
					<text class="zi">更多功能</text>
				</view>
				<view class="gongneng">
					<view class="kuaikuai">
						<view class="gongneng1">
							<image src="../../static/TestImg/kefu.png" mode="" class="jj"></image>
						</view>
						<text class="gongneng_zi">客服消息</text>
					</view>
					<view class="kuaikuai">
						<view class="gongneng1">
							<image src="../../static/TestImg/shangchengshouye.png" mode="" class="jj"></image>
						</view>
						<text class="gongneng_zi">商城首页</text>
					</view>
					<view class="kuaikuai">
						<view class="gongneng1">
							<image src="../../static/TestImg/kefuyubangzhu.png" mode="" class="jj"></image>
						</view>
						<text class="gongneng_zi">帮助与客服</text>
					</view>
					<view class="kuaikuai">
						<view class="gongneng1">
							<image src="../../static/TestImg/tuikuanyushouhou.png" mode="" class="jj"></image>
						</view>
						<text class="gongneng_zi">退款/售后</text>
					</view>


				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import Home from "../trade/components/dingdanzhuangtai.vue";
	export default {
		components: {
			Home
		},
		onLoad() {
			this.userId = uni.getStorageSync('id')
			// this.userId = getStorageSync("1")
			this.request("/orderstatus/getorderstatus", "get", {userId: this.userId}).then(
				(res) => {
					console.log(res);
					this.statuss = res.data.result;
					this.panduan(this.statuss);
					this.chulishuju();


				}).catch((err) => {
				console.log(err);
			});
			this.request("/shoppingAll/shoppingList", "get").then(
				(res) => {
					console.log(res);
					this.tuijianw = res.data.result.result;


					// this.statuss=res.data.result;
					this.tuijianw=res.data.result.result;
				}).catch((err) => {
				console.log(err);
			});
		},
		data() {
			return {
				show: false,
				tuijianw: [],
				image: ["image-url"], // replace with actual image URL
				productName: "Product Name",
				statuss: [
				],
				statusdaifukuan: [],
				statusyifahuo: [],
				statusdaifahuo: [],
				statusdaipjia: [],
				all: true,
				fukuan: false,
				daifahuo: false,
				pinjia: false,
				daishouhuo: true,
				kongkongd: true,

				daishouhuo :false,
				userId:""
				
			}
		},
		methods: {
			// spxqy(e){
			//     uni.navigateTo({
			//     	url:"/pages/Productdetails/ProductDetails?productId="+this.merchandiseews[e].productId
			//     })	
			// },
			tuijian(e){
				uni.navigateTo({
				url:"/pages/Productdetails/ProductDetails?productId="+this.tuijianw[e].productId
				})	
			},
			sousuo() {
				uni.navigateTo({
					url: "/pages/trade/neisousuo"
				})
			},
			fanhui() {
				uni.navigateBack({
					delta: 1
				})

			},
			allg() {
				if (this.statuss.length > 0) {
					this.kongkongd = false;
				} else {
					this.kongkongd = true;
				}
				this.all = true;
				this.fukuan = false;
				this.daifahuo = false;
				this.pinjia = false;
				this.daishouhuo = false;

			},
			fukuand() {
				if (this.statusdaifukuan.length > 0) {
					this.kongkongd = false;
				} else {
					this.kongkongd = true;
				}
				this.all = false;
				this.daifahuo = false;
				this.fukuan = true;
				this.pinjia = false;
				this.daishouhuo = false;

			},
			daifahuod() {
				if (this.statusdaifahuo.length > 0) {
					this.kongkongd = false;
				} else {
					this.kongkongd = true;
				}
				this.daifahuo = true;
				this.all = false;
				this.fukuan = false;
				this.pinjia = false;
				this.daishouhuo = false;

			},
			pinjiad() {
				if (this.statusdaipjia.length > 0) {
					this.kongkongd = false;
				} else {
					this.kongkongd = true;
				}
				this.daifahuo = false;
				this.all = false;
				this.fukuan = false;
				this.pinjia = true;
				this.daishouhuo = false;

			},
			daishouhuod() {
				if (this.statusyifahuo.length > 0) {
					this.kongkongd = false;
				} else {
					this.kongkongd = true;
				}
				this.daifahuo = false;
				this.all = false;
				this.fukuan = false;
				this.pinjia = false;
				this.daishouhuo = true;

			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			},

			panduan(e) {
				if (e.length > 0) {
					this.kongkongd = false;
				}
			},

			chulishuju() {
				for (let i = 0; i <= this.statuss.length; i++) {
					if (this.statuss[i].status == "paid") {
						this.statuss[i].status = "待发货"
						this.statusdaifahuo.push(this.statuss[i])
					}
					if (this.statuss[i].status == "pending") {
						this.statuss[i].status = "待处理"
						this.statusdaifukuan.push(this.statuss[i])
					}
					if (this.statuss[i].status == "shipped") {
						this.statuss[i].status = "已发货"
						this.statusyifahuo.push(this.statuss[i])
					}
					if (this.statuss[i].status == "completed") {
						this.statuss[i].status = "已收货"
					}
					if (this.statuss[i].status == "cancelled") {
						this.statuss[i].status = "已取消"
					}
					if (this.statuss[i].status == "evaluated") {
						this.statuss[i].status = "待评价"
						this.statusdaipjia.push(this.statuss[i])
					}
					if (this.statuss[i].status == "rated") {
						this.statuss[i].status = "已评价"
					}
					if (this.statuss[i].status == "delete") {
						this.statuss[i].status = "已删除"
					}


				}
			}

		}
	}
</script>

<style scoped>
	.jj {
		width: 70rpx;
		height: 70rpx;
		color: #a7a7a7;
		margin-top: 30rpx;
		margin-left: 15rpx;
	}

	.neirong {
		margin: auto;

	}

	.neirong>text {
		display: block;

	}

	.neirong>image {
		margin-left: 50rpx;
		width: 100rpx;
		height: 100rpx;

	}

	.kongkong {
		width: 100%;
		height: 300rpx;
		background-color: #efefef;
		margin-top: 30rpx;
		color: #a7a7a7;
		font-family: "楷体";
		font-size: 30rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;

		margin: auto;
		margin-top: 20rpx;

	}

	.kuaikuai {
		width: 150rpx;
		height: 150rpx;


		margin-left: 20rpx;
		position: relative;
	}

	.tanchukuang {
		height: 280rpx;
		display: flex;
		justify-content: space-evenly;
		flex-wrap: wrap;
	}

	.biaotidi {
		width: 100%;
		height: 50rpx;

		margin-top: 15rpx;
		margin-left: 42%;

	}

	.biaotidi>.zi {

		font-size: 25rpx;
		color: #a7a7a7;
		margin-top: 10rpx;
		text-align: center;
	}

	.gongneng {
		width: 100%;
		height: 150rpx;

		display: flex;
		justify-content: flex-start;
	}

	.gongneng1 {
		width: 120rpx;
		height: 120rpx;

		border-radius: 50%;

	}

	.gongneng_zi {
		font-size: 25rpx;
		width: 20rpx;
		color: #a7a7a7;
		/* 	position: absolute;
		bottom: 0; */

	}

	.yibufen {
		width: 95%;
		height: 30rpx;

		margin-top: 20rpx;

	}

	.erbufen {
		width: 95%;
		height: 30rpx;


	}

	.sanbufen {
		width: 95%;
		height: 30rpx;


	}

	.ppp {
		width: 95%;
		height: 30rpx;


	}


	.zongshu {
		padding-left: 20rpx;
		font-size: 25rpx;
	}

	.zongjia {
		padding-left: 70%;
		font-size: 25rpx;
	}

	.fahuozhuangtai1 {
		width: 95%;
		height: 80rpx;
		margin: auto;

		padding-top: 10rpx;
	}

	.kong {
		width: 100%;
		height: 60rpx;
		background-image: linear-gradient(rgb(255, 98, 124), rgb(255, 101, 137));
	}

	.daifukuan {
		width: 100%;
		background-color: rgb(243, 243, 243);


	}

	.daifahuo {
		width: 100%;
		background-color: rgb(243, 243, 243);


	}

	.yifahuo {
		width: 100%;
		background-color: rgb(243, 243, 243);


	}

	.pingjia {
		width: 100%;
		background-color: rgb(243, 243, 243);


	}

	.lijifukuan {
		width: 300rpx;
		height: 60rpx;
		border: 2rpx solid rgb(211, 208, 208);
		border-radius: 40rpx;
		font-size: 26rpx;
		position: absolute;
		top: 390rpx;
		right: 20rpx;
		text-align: center;
		padding-top: 20rpx;
		background-color: rgb(255, 36, 66);
	}

	.shanchudingdanfukuan {
		width: 180rpx;
		height: 60rpx;
		border: 2rpx solid rgb(211, 208, 208);
		border-radius: 40rpx;
		font-size: 30rpx;
		position: absolute;
		top: 390rpx;
		right: 340rpx;
		text-align: center;
		padding-top: 20rpx;
	}

	.fahuozhuangtai {
		width: 100%;
		height: 40rpx;
		background-color: rgb(232, 232, 232);
	}

	.ss {
		position: absolute;
		left: 20rpx;
		top: 25rpx;

	}

	.shijian {
		margin-left: 100rpx;

	}

































	navigator {
		text-decoration: none;
	}

	.dianpu {
		width: 100%;
		height: 360rpx;
	}

	.order_hedar {
		position: relative;
		width: 100%;
		height: 100rpx;
		background-image: linear-gradient(rgb(255, 101, 137), rgb(255, 229, 233));
		display: flex;
	}

	#backone {
		width: 40rpx;
		height: 40rpx;
	}

	.order_back {
		width: 40rpx;

		padding-top: 24rpx;
		padding-left: 10rpx;
	}

	.order_back>a>i {
		font-size: 50rpx;
	}

	.kuang {
		width: 580rpx;
		height: 60rpx;
		border-radius: 200rpx;
		opacity: 0.2;
		margin-top: 12rpx;
		margin-left: 30rpx;
		background-color: aliceblue;
		text-indent: 2em;
		font-size: 26rpx;

	}

	.order_mean {
		width: 60rpx;
		padding-top: 10rpx;
		padding-left: 20rpx;

	}

	.order_mean>image {
		opacity: 0.5;
		width: 40rpx;
		height: 40rpx;
		margin-top: 20rpx;

	}

	.sousuo {
		position: absolute;
		left: 90rpx;
		top: 25rpx;
		opacity: 0.5;
		width: 40rpx;
		height: 40rpx;


	}


	.navigation {
		width: 100%;
		height: 100rpx;


	}

	.navigation_ul {

		display: flex;
		justify-content: flex-start;
		padding-left: 0;
		padding-top: 30rpx;
		justify-content: space-evenly;
	}

	.navigation_li {
		list-style: none;
		/* margin-left: 20rpx; */
	}

	/* .navigation_li:hover{
	            text-decoration: underline;
	            padding-bottom: 10rpx;
				border-bottom:  4rpx solid #fff;
	           
	        }
	        .navigation_li>span{
	            color: black;
	        } */
	.navigation_ul navigation_li {
		box-sizing: border-box;

		display: inline-block;
		text-align: center;
		width: 200rpx;
		height: 100rpx;
		color: #fff;
		padding: 24rpx 10rpx;
		background: #424a58;

		text-decoration: none;
		cursor: pointer;

	}

	.navigation_ul .navigation_li:hover>text {
		padding-bottom: 10rpx;
		border-bottom: 4rpx solid rgb(247, 104, 128);
	}

	.Information {
		width: 100%;

		background-color: rgb(243, 243, 243);
		display: flex;
		flex-direction: column;
		display: flex;
		justify-content: space-evenly;
		padding-bottom: 40rpx;

	}

	.Information_hot {

		width: 95%;
		height: 80rpx;
		background-color: rgb(254, 219, 225);
		border-radius: 20rpx;
		margin-left: 16rpx;
		margin-top: 20rpx;
		box-sizing: content-box;
		padding-top: 20rpx;
	}

	.Information_hot01 {
		font-weight: bold;
		/* position: absolute;
	          top: 20rpx; */
		margin-left: 40rpx;
		margin-top: 24rpx;
	}

	.Information_hot02 {
		color: rgb(174, 171, 171);
		font-size: 16rpx;
		box-sizing: content-box;
		padding-top: 24rpx;
		padding-left: 6rpx;
	}

	.Information_hot03 {
		font-size: 26rpx;
		box-sizing: content-box;
		padding-left: 240rpx;
	}

	.Information_show {
		width: 95%px;
		height: 500rpx;
		background-color: #fff;
		border-radius: 20rpx;
		margin-top: 10rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
		position: relative;
		display: flex;
		justify-content: space-evenly;
		flex-wrap: wrap;



	}

	.tupian {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		top: 26rpx;
		left: 20rpx;

		border-radius: 50%;
	}

	.dianname {
		position: absolute;
		top: 20rpx;
		left: 70rpx;
	}

	.zhuangtai {
		position: absolute;
		top: 20rpx;
		right: 20rpx;
	}

	.shangp {
		width: 200rpx;
		height: 200rpx;
		position: absolute;
		top: 100rpx;
		left: 20rpx;
		border-radius: 10%;
	}

	.shangp_text {

		position: absolute;
		top: 100rpx;
		left: 240rpx;
		display: block;
		width: 250rpx;
		overflow: hidden;
		/*内容超出后隐藏*/
		text-overflow: ellipsis;
		/*超出内容显示为省略号*/
		white-space: nowrap;
		/*文本不进行换行*/
	}

	.danjia {
		position: absolute;
		top: 100rpx;
		right: 20rpx;
	}

	.guige {
		position: absolute;
		top: 160rpx;
		left: 240rpx;
		display: block;
		width: 250rpx;
		overflow: hidden;
		/*内容超出后隐藏*/
		text-overflow: ellipsis;
		/*超出内容显示为省略号*/
		white-space: nowrap;
		/*文本不进行换行*/
		color: #a7a7a7;
		font-size: 25rpx;
	}

	.shuliang {
		position: absolute;
		top: 160rpx;
		right: 20rpx;
		color: #a7a7a7;
		font-size: 25rpx;
	}

	.guanjianci {
		position: absolute;
		top: 210rpx;
		left: 240rpx;
	}

	.zongshu {
		position: absolute;
		top: 300rpx;
		left: 20rpx;
		color: #a7a7a7;
		font-size: 25rpx;
	}

	.zongjia {
		position: absolute;
		top: 300rpx;
		right: 20rpx;
	}

	.shanchudingdan {
		width: 180rpx;
		height: 60rpx;
		border: 2rpx solid rgb(211, 208, 208);
		border-radius: 40rpx;
		font-size: 30rpx;
		position: absolute;
		top: 360rpx;
		right: 260rpx;
		text-align: center;
		padding-top: 20rpx;
	}

	.jiarugouwuche {
		width: 220rpx;
		height: 60rpx;
		border: 2rpx solid rgb(211, 208, 208);
		border-radius: 40rpx;
		font-size: 30rpx;
		position: absolute;
		top: 360rpx;
		right: 20rpx;
		text-align: center;
		padding-top: 20rpx;
	}

	.tuijian_shangp {
		width: 100%;

		background-color: rgb(243, 243, 243);
		display: flex;
		flex-wrap: wrap;


	}

	.tuijian {
		width: 46%;
		height: 600rpx;
		background-color: #fff;
		justify-content: space-evenly;
		box-sizing: border-box;
		margin-top: 20rpx;
		margin-left: 20rpx;
		position: relative;
	}

	.shopping_name {
		display: block;
		width: 320rpx;
		position: absolute;
		top: 390rpx;
		left: 10rpx;

		font-size: 30rpx;
		overflow: hidden;
		/*内容超出后隐藏*/
		text-overflow: ellipsis;
		/*超出内容显示为省略号*/
		white-space: nowrap;
		/*文本不进行换行*/
	}

	.shopping_money {
		position: absolute;
		top: 440rpx;
		left: 4rpx;
		font-size: 30rpx;
	}

	.shopping_yuanjia {
		position: absolute;
		top: 437rpx;
		left: 200rpx;
		font-size: 28rpx;
		color: rgb(165, 165, 165);
	}

	.shopping_num {
		position: absolute;
		top: 480rpx;
		left: 10rpx;
		font-size: 28rpx;
		color: rgb(165, 165, 165);
	}

	.xinxi_x {

		height: 40rpx;
		border: 2rpx solid rgb(165, 165, 165);
		border-radius: 10rpx;
		position: absolute;
		top: 520rpx;
		left: 10rpx;
		font-size: 25rpx;

	}

	.biaoti {
		width: 100%;
		height: 80rpx;
		background-color: rgb(243, 243, 243);

		position: relative;
	}

	.biaoti>.biaoti_yidong {
		font-size: 40rpx;
		font-weight: 600;
		text-align: center;
		display: inline;
		position: absolute;
		top: 20rpx;
		left: 220rpx;
	}

	.henggang {
		color: rgb(212, 212, 212);

	}
</style>